<template>
  <div class="wrap">
    <img class="title-img" src="@/assets/home/title-icon1.png" />
    <div class="list-box">
      <div class="item-box">
        <img src="@/assets/home/leakage-icon1@2x.png" />
        <div class="text-box">
          <p class="pa">{{ homeStore.pipelineLeakageData.waterSupply }}</p>
          <p class="pb">供水量（㎡）</p>
        </div>
      </div>
      <div class="item-box">
        <img src="@/assets/home/leakage-icon2@2x.png" />
        <div class="text-box">
          <p class="pa">{{ homeStore.pipelineLeakageData.waterConsumption }}</p>
          <p class="pb">用水量（㎡）</p>
        </div>
      </div>
      <div class="item-box">
        <img src="@/assets/home/leakage-icon3@2x.png" />
        <div class="text-box">
          <p class="pa">{{ homeStore.pipelineLeakageData.leakageAmount }}</p>
          <p class="pb">漏损量（㎡）</p>
        </div>
      </div>
      <div class="item-box">
        <img src="@/assets/home/leakage-icon4@2x.png" />
        <div class="text-box">
          <p class="pa">{{ homeStore.pipelineLeakageData.leakageRate }}</p>
          <p class="pb">漏损率（%）</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from '@/Store/homeStore';


const homeStore = useHomeStore();

</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  background: linear-gradient(90deg, rgba(33, 100, 156, 0.5) 0%, rgba(29, 70, 143, 0.25) 100%);
  border: 1px solid rgba(35, 135, 217, 1);
  overflow: hidden;
  // background-clip: padding-box;
  // border-image: linear-gradient(to bottom, rgba(35, 135, 217, 1), rgba(133, 200, 255, 0.27)) 1 round;
  border-radius: 11px;
  margin-top: 34px;
  .title-img {
    width: 178px;
    height: 34px;
    margin: 11px auto 10px 42px;
  }
  .list-box {
    width: calc(100% - 61px - 64px);
    margin-left: 61px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 10.2px;
    .item-box{
      margin-bottom: 12.87px;
      width: 195.93px;
      height: 76.06px;
      border-radius: 10px;
      background: rgba(20, 38, 56, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        display: inline-block;
        width: 47px;
        height: 47px;
        margin-left: 18px;
      }
      .text-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
        margin-left: 17px;
        p {
          margin: 0;
        }
        p.pa {
          font-size: 30px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 43.44px;
          color: rgba(0, 251, 255, 1);
          text-align: left;
          vertical-align: top;
        }
        p.pb {
          height: 22px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 21.22px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
        }
      }
    }
  }
}
</style>